<template>
  <el-container class="layout-container">
    <el-aside width="220px">
      <div class="el-aside__logo"></div>
      <el-menu id="element" :collapse="isCollapse" active-text-color="#2E8B57" background-color="#F5F5F5"
        text-color="#363636" router>
        <el-submenu index="1" v-show="myInfo.role === '超级管理员' || myInfo.role === '机构管理员'">
          <template slot="title"><i class="el-icon-menu" style="color:dimgray"></i>
            <span style="font-weight: bold;font-size: 16px;">基本信息管理</span>

          </template>
          <el-menu-item-group>
            <el-menu-item index="/agency" v-show="theMajorOfMy">业主机构管理</el-menu-item>
            <el-menu-item index="/user">用户信息管理</el-menu-item>
            <el-menu-item index="/documentVideoManage">文档视频管理</el-menu-item>
            <el-menu-item index="/testQuestion">试题库管理</el-menu-item>
            <el-menu-item index="/trainingPlan">培训计划管理</el-menu-item>
            <el-menu-item index="/learningSituation">学员学习情况</el-menu-item>
            <el-menu-item index="/examSituation">学员考试情况</el-menu-item>
          </el-menu-item-group>

        </el-submenu>
        <el-submenu index="2" v-show="myInfo.role === '超级管理员' || myInfo.role === '机构管理员'">
          <template slot="title"><i class="el-icon-menu" style="color:dimgray"></i>
            <span style="font-weight: bold;font-size: 16px;">基本参数管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/agencyTypeManage" v-show="theMajorOfMy">机构类型的管理</el-menu-item>
            <el-menu-item index="/trainingCycleManage" v-show="theMajorOfMy">培训周期管理</el-menu-item>
            <el-menu-item index="/trainingTypeManage" v-show="theMajorOfMy">培训类型管理</el-menu-item>
            <el-menu-item index="/documentVideoTypeManage" v-show="theMajorOfMy">文档视频类型管理</el-menu-item>
            <el-menu-item index="/consultManage">前端咨询展示列表管理</el-menu-item>
          </el-menu-item-group>

        </el-submenu>
        <el-submenu index="3" v-show="myInfo.role === '审核人员' || myInfo.role === '发布人员'">
          <template slot="title"><i class="el-icon-menu" style="color:dimgray"></i>
            <span style="font-weight: bold;font-size: 16px;">视频审核发布管理</span></template>
          <el-menu-item-group>
            <el-menu-item index="/documentVideoReview">视频审核发布
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4"
          v-show="myInfo.role === '学员' || myInfo.role === '机构管理员' || myInfo.role === '超级管理员' || myInfo.role === '审核人员' || myInfo.role === '发布人员'">
          <template slot="title"><i class="el-icon-menu" style="color:dimgray"></i>
            <span style="font-weight: bold;font-size: 16px;">我的首页</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/agencyHomePage"
              v-show="myInfo.role !== '发布人员' && myInfo.role !== '审核人员'">机构首页</el-menu-item>
            <el-menu-item index="/trainingPlanForStudent"
              v-show="myInfo.role !== '发布人员' && myInfo.role !== '审核人员'">在线培训</el-menu-item>
            <el-menu-item index="/InfoManage">个人信息管理</el-menu-item>
            <el-menu-item index="/consult" v-show="myInfo.role === '学员'">前端咨询列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <h1 style="margin-top: 15px;">
          {{ myInfo.role }}<strong>：</strong><strong>{{ myInfo.name }}</strong>
        </h1>
        <el-dropdown class="el-dropdown-link"
          style="right: 0;top:15px; height: 2vh; margin-right:15px; position: absolute">
          <span class="el-dropdown__box">
            <el-avatar :size="45" :src="circleUrl"></el-avatar>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="quit">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>交通运输人员就业与再就业教育培训平台 ©2024 Created by 重庆交通大学22级计算机科学与技术曙光班 向鸿锐&肖鸿源&谭昌平
      </el-footer>
    </el-container>
  </el-container>
</template>
<script>

import avatar from "@/assets/logo.png";
import { changeUser, getInfo } from "@/api/user";
import Router from "@/router";
import { getToken, removeToken } from "@/utils/auth";

export default {
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: []
      },
      user: {},
      myInfo: "",
      theMajorOfMy: "",
    }
  },

  methods: {

    getMyInfo() {
      getInfo().then((res) => {
        //console.log(res)
        if (res.data.code === 1) {
          this.myInfo = res.data.data;
          if (res.data.data.role === '超级管理员') {
            this.theMajorOfMy = true;
          }
        }
      }).catch((e) => {
      })
    },
    quit() {
      removeToken();
      this.$message.success("退出成功");
      Router.push('/login');
    },

  },
  mounted() {
    let token = getToken();
    if (token == null) {
      this.$message.error("请先登录");
      window.location.href = ("/login");
    }
    this.getMyInfo();
  }
};
</script>


<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
}

.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #f5f5f5;

    &__logo {
      height: 150px;
      background: url("@/assets/logo.jpg") no-repeat center / 110px auto;
    }

    .el-menu {
      border-right: none;
    }

    // overflow-x: hidden;
    // overflow-y: hidden; //禁用滚动条则不能滑动了
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #000;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>
